<template>
  <!-- 放置弹层组件 -->
  <el-dialog title="快点注册啦~" :visible="showDialog" @close="btnCancel">
    <!-- 表单组件  el-form   label-width设置label的宽度   -->
    <!-- 匿名插槽 -->
    <el-form
      ref="deptForm"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="账号" prop="manager">
        <el-input v-model="formData.manager" style="width: 80%" placeholder="8-16个字符" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="formData.password" style="width: 80%" placeholder="请将长度控制在6-16位" />
      </el-form-item>
      <el-form-item label="昵称" prop="name">
        <el-input v-model="formData.name" style="width: 80%" placeholder="不能超过8个字符" />
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input v-model="formData.mobile" style="width: 80%" placeholder="1-16个字符" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="formData.email" style="width: 80%" placeholder="1-16个字符" />
      </el-form-item>
      <el-form-item label="生日" prop="birthday">
        <el-date-picker
          v-model.number="formData.birthday"
          type="date"
          placeholder="请选择出生日期"
        />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age" style="width: 80%" placeholder="1-16个字符" />
      </el-form-item>
    </el-form>
    <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
    <el-row slot="footer" type="flex" justify="center">
      <!-- 列被分为24 -->
      <el-col :span="6">
        <el-button size="small" @close="btnCancel">取消</el-button>
        <el-button type="primary" size="small" @click="btnOK">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      formData: {
        manager: '',
        password: '',
        name: '',
        mobile: '',
        email: '',
        birthday: null,
        age: ''
      },
      rules: {
        manager: [
          { required: true, message: '请输入你的账号哦', trigger: 'blur' },
          { min: 8, max: 16, message: '请将长度控制在8-16位', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{8,16}$/, message: '必须是数字或英文', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入你的密码哦', trigger: 'blur' },
          { min: 6, max: 16, message: '请将长度控制在6-16位' },
          { pattern: /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[_|.|~|!|@|#|$|%|^|&|*]).{6,16}$/, message: '请同时包含大小写字母、数字和特殊符号' }
        ],
        name: [
          { required: true, message: '请输入你的昵称哦', tigger: 'blur' },
          { min: 1, max: 8, message: '请将长度控制在1-8位', trigger: 'blur' },
          { pattern: /^[\u4e00-\u9fa5]{1,8}$/, message: '不能超过8个字符' }

        ],
        mobile: [
          { required: true, message: '请输入你的电话号码哦', trigger: 'blur' },
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请输入正确的号码格式', tigger: 'blur' },
          { trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入你的邮箱哦', trigger: 'blur' },
          { pattern: /^[a-zA-Z0-9]{3,15}@(qq|163)\.com$/, message: '只能识别QQ邮箱和163邮箱' }

        ],
        birthday: [
          { required: true, trigger: 'blur' }

        ],
        age: [
          { required: true, message: '请输入你的年龄哦', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    formData: {
      handler() {
        if (this.formData.birthday === '') {
          return this.formData.age === ''
        }
        const birth = Math.ceil((new Date() - this.formData.birthday) / 1000 / 60 / 60 / 24 / 365)
        this.formData.age = birth
      },
      deep: true
    }
  },
  methods: {
    btnOK() {
      this.$refs.deptForm.validate(isOK => {
        if (isOK) {
          this.$message.success('注册成功')
          this.$emit('update:showDialog', false)
          console.log(this.$refs.deptForm)
          this.$refs.deptForm.resetField()
        }
      })
    },
    btnCancel() {
      this.formData = ''
      this.$emit('update:showDialog', false)
      this.$refs.deptForm.resetField()
    }
  }
}
</script>

<style>
</style>
